<template>
	<view class="OperatingButton">
		<!-- 列表 -->
		<view v-if="typeOper == 0">
			<u-button type="primary" :customStyle="{width: '678rpx',height: '92rpx',borderRadius: '8rpx'}"
				color="linear-gradient( 315deg, #FF4800 0%, #FF7824 100%)" @click="onReceiving(2)"
				v-if="item.orderStatus == 3 && addIndex == 1">
				<text class="color-f font-weight-600 size-36">我要接单</text>
			</u-button>
			<u-button type="primary" :customStyle="{width: '678rpx',height: '92rpx',borderRadius: '8rpx'}"
				color="#E1D9D6" @click="onReceiving(3)" v-if="item.orderStatus == 3 && addIndex == 0">
				<text class="color-f font-weight-600 size-36">我要接单</text>
			</u-button>
			<view class="primary dis-cen" v-if="[5,4].includes(item.orderStatus*1)">
				<u-button type="primary" :customStyle="{width: '330rpx',height: '92rpx',margin:0,borderRadius: '8rpx'}"
					color="#DCDCDC" :plain="true" @click="onPhone(phone)">
					<image class="primary-img" src="@/static/icon/sj.png" mode=""></image>
					<view class="dis">
						<text class="color-6 font-weight-400 size-36">联系用户</text>
					</view>
				</u-button>
				<u-button type="primary" :customStyle="{width: '330rpx',height: '92rpx',margin:0, borderRadius: '8rpx'}"
					color="linear-gradient( 315deg, #FF1A1A 6%, #FD541C 100%)" v-if="item.orderStatus*1 == 4"
					@click="onOrderOperation(item,2)">
					<text class="color-f font-weight-600 size-36">我已取货</text>
				</u-button>
				<u-button type="primary" :customStyle="{width: '330rpx',height: '92rpx',margin:0, borderRadius: '8rpx'}"
					color="#FF981A" v-if="item.orderStatus == 5" @click="onOrderOperation(item,3)">
					<text class="color-f font-weight-600 size-36">我已送达</text>
				</u-button>
			</view>
		</view>
		<!-- 详情 -->
		<view class="operating dis-cen" v-else>
			<u-button type="primary" :hoverStartTime="100000"
				:customStyle="{width: '216rpx',height: '92rpx',margin:0,borderRadius: '8rpx'}" color="#ffffff"
				@click="onPhone(phone)">
				<view>
					<image class="primary-img" src="@/static/icon/sj.png" mode=""></image>
					<text class="color-6 font-weight-400 size-28">联系用户</text>
				</view>
			</u-button>
			<u-button type="primary" :customStyle="{width: '510rpx',height: '92rpx',borderRadius: '8rpx'}"
				color="linear-gradient( 315deg, #FF4800 0%, #FF7824 100%)" @click="onReceiving(2)"
				v-if="item.orderStatus == 3 && addIndex == 1">
				<text class="color-f font-weight-600 size-36">我要接单</text>
			</u-button>
			<u-button type="primary" :customStyle="{width: '315deg',height: '92rpx',borderRadius: '8rpx'}"
				color="#E1D9D6" @click="onReceiving(3)" v-if="item.orderStatus == 3 && addIndex == 0">
				<text class="color-f font-weight-600 size-36">我要接单</text>
			</u-button>
			<u-button type="primary" :customStyle="{width: '510rpx',height: '92rpx',margin:0, borderRadius: '8rpx'}"
				color="linear-gradient( 315deg, #FF1A1A 6%, #FD541C 100%)" @click="onOrderOperation(item,2)"
				v-if="item.orderStatus*1 == 4">
				<text class="color-f font-weight-600 size-36">我已取货</text>
			</u-button>
			<u-button type="primary" :customStyle="{width: '510rpx',height: '92rpx',margin:0, borderRadius: '8rpx'}"
				color="#FF981A" v-if="item.orderStatus == 5" @click="onOrderOperation(item,3)">
				<text class="color-f font-weight-600 size-36">我已送达</text>
			</u-button>
			<u-button type="primary" :hoverStartTime="100000"
				:customStyle="{width: '510rpx',height: '92rpx',margin:0, borderRadius: '8rpx'}" color="#F3F3F3"
				v-if="item.orderStatus == 1">
				<text class="color-6 font-weight-500 size-36">订单已送达</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import { UpdOrdersStatus } from "@/api/index";
	const tis = {
		2: {
			name: "确认接单？",
			tis: "接单后请按照用户要求的时间段送达商品"
		},
		3: "已暂停接单"
	}
	export default {
		name: "OperatingButton",
		components: {

		},
		props: {
			typeOper: { // 0=列表，1=详情
				type: Number,
				default: 0
			},
			phone: {
				type: [Number, String],
				default: ''
			},
			addIndex: { // 1=接单中 0=暂停接单
				type: Number,
				default: 0
			},
			item: { // 数据
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				phoShow: false, // 按钮弹窗是否显示
				params: {
					orderId: '', // 订单id
					takeUrl: '', // 取件图片
					serviceUrl: '', // 送达图片
					type: 1, // 類型 1.接单 2.取货 3.完成
				}
			}
		},
		methods: {
			// 是否可以接单
			async postUpdOrdersStatus(e) {
				// console.log(e)
				// if (e) {
				// 	this.params.type = e.type
				// 	this.params.takeUrl = e.takeUrl
				// 	this.params.serviceUrl = e.serviceUrl
				// 	this.phoShow = false
				// }
				this.params.orderId = this.item.orderId
				const { data, code } = await UpdOrdersStatus(this.params)
				if (code == '200') {
					uni.showToast({
						title: '操作成功',
						duration: 2000
					});
					this.$emit('operate', 1)
				}
			},
			// 弹窗提示 0=开启接单、1=关闭接单、2=确认接单、3=无法接单
			onReceiving(index) {
				const _this = this
				// _this.addIndex = index ? 0 : 1
				if (index == 3) {
					uni.showToast({
						title: tis[index],
						duration: 2000,
						icon: 'none'
					});
					return
				}
				uni.showModal({
					title: tis[index].name,
					content: tis[index].tis,
					success: function(res) {
						if (res.confirm) {
							// 确认接单
							_this.params.type = 1
							_this.postUpdOrdersStatus()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 打电话
			onPhone(data) {
				uni.makePhoneCall({
					phoneNumber: data + '', // 替换为实际要拨打的电话号码  
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.error('拨打电话失败');
					}
				});
			},
			// 1=我已取货，2=订单已送达
			onOrderOperation(item, index) {
				// this.phoShow = true
				let orData = {
					item: item,
					type: index
				}
				this.$emit('operate', orData)
			}
		}
	}
</script>

<style lang="scss">
	.OperatingButton {
		.operating {
			padding: 16rpx 24rpx 16rpx 0;
			text-align: center;

			.primary-img {
				width: 24rpx;
				height: 24rpx;
				margin: 0 auto 16rpx;
			}
		}
	}
</style>